<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: Layout with Dijit</title>
		<link rel="stylesheet" href="css/demo.css" media="screen">
		<link rel="stylesheet" href="css/style.css" media="screen">
		<link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen">
		<style type="text/css">
@import "js/dijit/themes/claro/claro.css";
@import "js/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "js/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

		</style>
	</head>
	<body class="claro">
		<div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'">
		
			<div class="edgePanel" style="Height:120px" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">Header content (top)
				<div id="mainMenu" data-dojo-type="dijit/MenuBar">
					<div id="edit" data-dojo-type="dijit/MenuBarItem">
					Edit
					</div>
					<div id="view" data-dojo-type="dijit/MenuBarItem">
					View
					</div>
					<div id="task" data-dojo-type="dijit/PopupMenuBarItem">
						<span>Task</span>
						<div id="taskMenu" data-dojo-type="dijit/Menu">
							<div id="complete" data-dojo-type="dijit/MenuItem">
							Mark as Complete
							</div>
							<div id="cancel" data-dojo-type="dijit/MenuItem">
							Cancel
							</div>
							<div id="begin" data-dojo-type="dijit/MenuItem">
							Begin
							</div>
						</div>
					</div><!-- end of sub-menu -->
				</div>
			</div>
			
			<div id="leftCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true">Sidebar content (left)
				<div id="mainMenu2" data-dojo-type="dijit/Menu">
					<div id="edit2" data-dojo-type="dijit/MenuItem">
					Edit
					</div>
					<div id="view2" data-dojo-type="dijit/MenuItem">
					View
					</div>
					<div id="task2" data-dojo-type="dijit/PopupMenuItem">
						<span>Task</span>
						<div id="taskMenu2" data-dojo-type="dijit/Menu">
							<div id="complete2" data-dojo-type="dijit/MenuItem">
							Mark as Complete
							</div>
							<div id="cancel2" data-dojo-type="dijit/MenuItem">
							Cancel
							</div>
							<div id="begin2" data-dojo-type="dijit/MenuItem">
							Begin
							</div>
						</div>
					</div><!-- end of sub-menu -->
				</div>
			
			</div>
			
			<div id ="tabs" style="height:1300px" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region: 'center', tabPosition: 'top'">
				<div id="pane1" data-dojo-type="dijit/layout/ContentPane" title="Group 1">
					<button id="btnAddTab" data-dojo-type="dijit/form/Button" type="button">
						Add New Tab
					</button>		
					<br />
					<button id="btnSelectSc" data-dojo-type="dijit/form/Button" type="button">
						Select Second
					</button>		
					<br />
				    <button id="btnSelectSt" data-dojo-type="dijit/form/Button" type="button">
						Select Third
					</button>								
					<div id="gridDiv" ></div>							
				</div>
				<div id="pane2" data-dojo-type="dijit/layout/ContentPane" title="Group Two">
					<h4>Group 2 Content</h4>
				</div>
				<div id="pane3" data-dojo-type="dijit/layout/ContentPane" title="Long Tab Label for this One">
					<h4>Group 3 Content</h4>
				</div>
			</div>
			
			<div id="bottom" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom', splitter: true">Page Footer</div>
		</div>
		<!-- load dojo and provide config via data attribute -->
		<script src="js/dojo/dojo.js"></script>
		<script>

			require(["dojo/dom", 
			"dojo/parser", 
			"dojo/ready", 
			"dojo/on", 
			"dijit/form/Button",
			"dojox/layout/ContentPane",
			"dijit/registry",
			"dijit/layout/TabContainer",
			"dojo/mouse",
			"dijit/layout/BorderContainer"], function(dom, parser, ready, on, Button, ContentPane, registry, TabContainer){
				
				ready(function(){					
						parser.parse();
						
						on(dom.byId("btnAddTab"), "click", function(){
							var tabs = registry.byId("tabs");
							
							var pane = new ContentPane({ title:"Remote Content", 
									href: "textBox.html", 
									closable: true, 
									onClose: function(){
								   // confirm() returns true or false, so return that.
								   return confirm("Do you really want to Close this?");
								}});
								
								pane.set("onDownloadEnd", function(){
								//parser.parse(pane);
									console.log("parse after end.");
								});
								
							tabs.addChild(pane);
							tabs.selectChild(pane);
							tabs.startup();
						});
						
						on(dom.byId("btnSelectSc"), "click", function(){
							var tabs = registry.byId("tabs");
							var pane = registry.byId("pane2");
							tabs.selectChild(pane);
						});
						
						on(dom.byId("btnSelectSt"), "click", function(){
							var tabs = registry.byId("tabs");
							var pane = registry.byId("pane3");
							tabs.selectChild(pane);
						});
				});
				
			});
			
		</script>
	</body>
</html>
